<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>LIGHTBOX EXAMPLE</title>
		<style>
		.black_overlay{
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index:1001;
			-moz-opacity: 0.8;
			opacity:.80;
			filter: alpha(opacity=80);
		}
		.white_content {
			display: none;
			position: absolute;
			top: 25%;
			left: 25%;
			width: 50%;
			height: 50%;
			padding: 16px;
			border: 16px solid orange;
			background-color: white;
			z-index:1002;
			overflow: auto;
		}
	</style>
    <script type="text/javascript">
function getShoppingCart1(){
	
		var order = {'ordercount':2,	'order':[{'orderid':1, 'productid':1,		 'productdesc':'A Nice white T-Shirt',		 'quantity':2, 'rate':'280.95'},  {'orderid':2,		  'productid':2,		  'productdesc':'A Nice red T-Shirt', 'quantity':3,		  'rate':'260.75'}]};
		var count = order.ordercount;
		var text='';
		for(i=0;i<count;i++){
			text=text+'Order ID : '+order.order[i].orderid+'<br>';
		}
		document.getElementById("light").innerHTML= text;
		

}
</script>
	</head>
	<body>
		<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';getShoppingCart1()">here</a></p>
		<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
		<div id="fade" class="black_overlay"></div>
	</body>
</html>